<template>
  <div class="index">
    <h2
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: rgb(52, 69, 99);
      "
    >
      维修工单
    </h2>
    <div class="monter">
      <div>
        <span class="demonstration">开始时间：</span>
        <el-date-picker
          v-model="valuedate"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <div class="le">
        <span class="demonstration">结束时间：</span>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <div class="ox">
        <div class="ox-first">维修人员</div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
      <div class="oxlast">
        <el-button
          type="primary"
          icon="el-icon-zoom-in"
          size="mediu"
          @click="chaxun"
          >查询</el-button
        >
        <el-button
          type="info"
          icon="el-icon-refresh-right"
          size="mediu"
          @click="congz"
          >重置</el-button
        >
      </div>
    </div>
    <div class="footer">
      <!-- <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="wxname" label="维修人员"> </el-table-column>
        <el-table-column prop="rwnum" label="任务量"> </el-table-column>
        <el-table-column v-for="(v,index) in lkn" :key="index" prop=" " :label="v.riqi">
          <span v-for="(m,i) in list[index]" :key="i">
            {{list[index][i]}}
            {{panding(v.riqi,list[index][i])}}
             <span v-for="(ls,ine) in list[index][i]" :key="ine">{{panding(v.riqi,list[index][i])}} </span> 
            </span>
          
        </el-table-column>
       
      </el-table>-->
      <table class="my-table">
        <tr>
          <td>维修人员</td>
          <td>任务量</td>
          <td v-for="(v, ket, i) in kof" :key="i">{{ ket }}</td>
        </tr>
        <tr v-for="(v, k, i) in taeb" :key="i">
          <td>{{ v.pname }}</td>
          <td>{{ v.orders }}</td>
          <td v-for="(va, ke, ind) in v.order" :key="ind">{{ va }}</td>
        </tr>
      </table>
      <div class="nex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <span class="demonstration">直接前往 </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      valuedate: "",
      value2: "",
      currentPage3: 1,
      total: 0,
      page: 1,
      taeb: [],
      kof: {},
    };
  },
  computed: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.xuanran();
    },
    congz() {
      this.value2 = "";
      this.valuedate = "";
      this.input = "";
      this.xuanran();
    },
    chaxun() {
      console.log(this.input, this.input == "" ? null : this.input);
      console.log(
        this.valuedate == "" ? null : this.valuedate,
        this.value2 == "" ? null : this.value2
      );
      this.xuanran();
    },
    //渲染页面
    xuanran() {
      this.$axios({
        url: "/mtorder/list",
        method: "post",
        data: {
          endTime: this.value2 == "" ? null : this.value2,
          limit: 5,
          page: this.page,
          pname: this.input == "" ? null : this.input,
          startTime: this.valuedate == "" ? null : this.valuedate,
        },
      }).then((res) => {
        this.taeb = [];
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          this.taeb.push(res.data.data[i]);
          this.kof = res.data.data[i].order;
        }
        this.total = res.data.total;
      });
    },
  },
  mounted: function () {
    this.xuanran();
  },
};
</script>

<style scoped>
.nex {
  margin-top: 30px;
  display: flex;
  justify-content: right;
  margin-right: 20px;
  align-items: center;
}

.ox {
  display: flex;
  width: 300px;
}
.ox-first {
  width: 96px;
}
.index {
  padding: 30px;
}
.monter {
  margin: 30px;
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
}
.le {
  margin-left: 30px;
}
.monter .el-input__inner {
  width: 400px;
}
.oxlast {
  position: relative;
  left: -110px;
}
.my-table {
  width: 100%;
}
.my-table tr {
  height: 41px;
  line-height: 41px;
}
.my-table tr td {
  border-bottom: 1px solid #eee;
}
</style>